<template>
  <div class="home">
    <div class="logo">
      <img src="../../assets/images/logo1.jpg" width="100%" alt="" />
      <!-- 点击进入城市 -->
      <router-link class="select" to="/selectcity">{{city}}</router-link>
    </div>
    <CovInfo :covDesc="covDesc" :news="news"></CovInfo>
    <!-- 疫情小导航 -->
    <div class="list">
      <div>
        <router-link to="/area">
          <img src="../../assets/images/1.png" alt="" />
          <div>风险地区</div>
        </router-link>
      </div>
      <div>
        <router-link to="/hesuan">
          <img src="../../assets/images/2.png" alt="" />
          <div>核算检测</div>
        </router-link>
      </div>
      <div>
        <router-link to="/prevention">
          <img src="../../assets/images/3.png" alt="" />
          <div>防疫物资</div>
        </router-link>
      </div>
      <div>
        <router-link to="/travel">
          <img src="../../assets/images/4.png" alt="" />
          <div>出行政策</div>
        </router-link>
      </div>
    </div>
    <!-- 数据统计 -->
    <CovNumber :covData="covData" />
    <!-- 5中国地图 -->
    <ChinaMap />
    <!-- 6轮播图 -->
    <VueSwiper />
    <!-- <Test /> -->
    <Travel />
  </div>
</template>

<script>
import CovInfo from './CovInfo/CovInfo.vue'
import CovNumber from './CovInfo/CovNumber.vue'
import ChinaMap from './VueEcharts/ChinaMap.vue'
import VueSwiper from './VueSwiper/VueSwiper.vue'
import Travel from '../Travel/Travel.vue'
export default {
  name: 'HomeView',
  data() {
    return {
      covDesc: {},
      news: [],
      covData: {}, // 全国数据
      city: '国内疫情'
    }
  },
  components: { CovInfo, CovNumber, ChinaMap, VueSwiper, Travel },
  methods: {},
  beforeDestroy() {
    this.$bus.$off('city')
  },
  created() {
    this.$bus.$on('city', val => {
      console.log(val)
      this.city = val
    })
    // this.api.getCovInfo().then(res => {
    //   console.log('0000', res.data)
    //   const data = res.data.newslist[0].desc
    //   const data2 = res.data.globalStatistics
    //   console.log('全国', data2)
    //   this.covDesc = {
    //     note1: (data.note1 = '病毒：SARS-CoV-2，其导致疾病命名 COVID-19'),
    //     note2: (data.note2 = '传染源：新冠肺炎的患者。无症状感染者也可能成为传染源.'),
    //     note3: (data.note3 = '传播途径：经呼吸道飞沫、接触传播是主要的传播途径气溶胶传播和消化道等传播途径尚待明确。'),
    //     remark1: (data.remark1 = '易感人群：人群普遍易感。老年人及有基础疾病者感染后病情较重，儿童及婴幼儿也有发病'),
    //     remark2: (data.remark2 = '潜伏期：一股为 3~7天，最长不超过 14 天，潜伏期内可能存在传染性，其中无症状病例传染性非常罕见'),
    //     remark3: (data.remark3 = '宿主：野生动物，可能为中华菊头蝠')
    //   }
    //   // 疫情热点
    //   this.news = res.data.newslist[0].news
    //   console.log('我是新闻', this.news)
    //   // 3. 全国疫情的数据统计信息---
    //   this.covData = {
    //     currentConfirmedCount: data.currentConfirmedCount,
    //     confirmedCount: data.confirmedCount,
    //     suspectedCount: data.suspectedCount,
    //     curedCount: data.curedCount,
    //     deadCount: data.deadCount,
    //     seriousCount: data.seriousCount,
    //     suspectedIncr: data.suspectedIncr,
    //     currentConfirmedIncr: data.currentConfirmedIncr,
    //     confirmedIncr: data.confirmedIncr,
    //     curedIncr: data.curedIncr,
    //     deadIncr: data.deadIncr,
    //     seriousIncr: data.seriousIncr,
    //     modifyTime: data.modifyTime
    //   }
    //   console.log(this.covData)
    // })
    this.api.getTest().then(res => {
      console.log(res.data.data.chinaTotal.total
        , '我是全国')
      this.covData = res.data.data.chinaTotal
    })

    /**  api
            currentConfirmedCount 现存确诊
            confirmedCount  累计确诊
            suspectedCount  累计境外输入人数
            curedCount    累计治愈人数
            deadCount   累计死亡人数
            seriousCount  现存无症状人数
            suspectedIncr  新增境外输入人数
            currentConfirmedIncr   相比昨日现存确诊人数
            confirmedIncr  相比昨日累计确诊人数
            curedIncr   相比昨日新增治愈人数
            deadIncr  相比昨日新增死亡人数
            seriousIncr 相比昨日现存无症状人数

              modifyTime 时间

             */
  }
}
</script>
<style scoped lang='less'>
.logo {
  position: relative;
  .select {
    position: absolute;
    right: 0.2rem;
    top: 0.3rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }
}
.list {
  display: flex;
  padding-bottom: 0.2rem;
  > div {
    flex: 1;
    text-align: center;
    color: #666;
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
}
</style>
